<template>
  <div class="chinaMap" ref="chinaMapRef"></div>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import china from "./china.json";

const chinaMapRef = ref(); //获取DOM元素

echarts.registerMap("china", china as any); //注册地图
onMounted(() => {
  const myEcharts = echarts.init(chinaMapRef.value); //echarts 绘图
  const data = [
    { name: "台湾", value: "34580" },
    { name: "香港", value: "1497" },
    { name: "四川", value: "134" },
    { name: "广东", value: "53" },
    { name: "西藏", value: "53" },
    { name: "海南", value: "24" },
    { name: "内蒙古", value: "14" },
    { name: "天津", value: "12" },
    { name: "福建", value: "10" },
    { name: "黑龙江", value: "10" },
    { name: "辽宁", value: "9" },
    { name: "重庆", value: "8" },
    { name: "上海", value: "7" },
    { name: "陕西", value: "5" },
    { name: "山东", value: "5" },
    { name: "新疆", value: "5" },
    { name: "北京", value: "4" },
    { name: "云南", value: "4" },
    { name: "青海", value: "4" },
    { name: "江苏", value: "2" },
    { name: "湖北", value: "1" },
    { name: "吉林", value: "1" },
    { name: "河南", value: "1" },
    { name: "江西", value: "1" },
    { name: "甘肃", value: "1" },
    { name: "浙江", value: "0" },
    { name: "广西", value: "0" },
    { name: "河北", value: "0" },
    { name: "安徽", value: "0" },
    { name: "湖南", value: "0" },
    { name: "澳门", value: "0" },
    { name: "山西", value: "0" },
    { name: "贵州", value: "0" },
    { name: "宁夏", value: "0" },
  ];

  const option = {
    title: {
      text: "新冠疫情新增确诊数据",
      left: "center",
      top: 20,
    },
    tooltip: {},
    series: {
      name: "新冠疫情新增确诊数据",
      type: "map",
      map: "china",
      data,
      label: {
        show: true,
      },
    },

    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 1500 ,color:"#000",label:"禁区" }, // 不指定 max，表示 max 为无限大（Infinity）。
        { min: 101, max: 1000, color: "#b80909" ,label:"重风险区"},
        { min: 11, max: 100, color: "#f57567", label: "高风险区" },
        { min: 1, max: 10, color: "#ffe5db", label: "低风险区" },
        { min: 0, max: 0, color: "#ffffff", label: "无感染区" },
        // 表示 value 等于 123 的情况。
      ],
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.chinaMap {
  width: 100%;
  height: 600px;
}
</style>